<template>
    <div class="updateForm">
        <el-row
            :gutter="10"
            class="mb8 clearfix "
            style="margin-top:10px;margin-left:20px;">
                    <el-col :span="18">
                        <!-- <div class="radioGroup">
                            场地选择：
                           <el-radio-group v-model="radio">
                                <el-radio :label="3">全部</el-radio>
                                <el-radio :label="6">备选项</el-radio>
                                <el-radio :label="9">备选项</el-radio>
                            </el-radio-group>
                        </div> -->
                        <div class="radioGroup">
                            <label class="radioLabel">用地类型：</label>  
                           <el-radio-group v-model="radio1">
                                <el-radio :label="val" v-for="(val,index) in ctname" :key="index" class="radioItem">{{val}}</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="radioGroup">
                            <label class="radioLabel">管控类型：</label>  
                           <el-radio-group v-model="radio2">
                                 <el-radio :label="val" v-for="(val,index) in threshtypename" :key="index" class="radioItem" >{{val}}</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="radioGroup">
                           <label class="radioLabel"> 结果类型：</label>  
                           <el-radio-group v-model="radio3">
                                <el-radio :label="val" v-for="(val,index) in cas" :key="index" class="radioItem" >{{val}}</el-radio>
                            </el-radio-group>
                        </div>
                        <!-- <div class="radioGroup">
                            污染物类型：
                           <el-radio-group v-model="radio4">
                                <el-radio :label="val" v-for="(val,index) in chemicaltype" :key="index">{{val}}</el-radio>
                            </el-radio-group>
                        </div> -->
                        <div class="radioGroup">
                            <label class="radioLabel">关注污染物：</label>  
                           <el-radio-group v-model="radio5">
                                <el-radio :label="val" v-for="(val,index) in chemname" :key="index" class="radioItem" >{{val}}</el-radio>
                            </el-radio-group>
                        </div>
                    </el-col>
                    <el-col
                        :span="1.5"
                        style="float:right;margin:60px 20px 0px 0px;"
                    >
                        <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="small"   
                        @click="GetSampling"             
                    >检查</el-button>
                    </el-col>
        </el-row>
        <div
            class="table"
            style="height:100%;background:white;padding:10px"
            v-loading="loading"
        >
            <el-table
                :data="polluteResult"
                class="zoneTask"
                :header-cell-style="{background:'#DADDE9',color:'#000',height:'44px'}"
            >
                <el-table-column
                    label="点号"
                    prop="boringcode"
                    :show-overflow-tooltip="true"
                    width="150"
                />
                <el-table-column
                    label="污染物"
                    prop="pname"
                    :show-overflow-tooltip="true"
                    column-key="pname"
                    :filters="pnameFilters"
                    :filter-method="filterPname"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    label="经度"
                    prop="lon"
                    :show-overflow-tooltip="true"
                    width="150"
                >
                </el-table-column>
               <el-table-column
                    label="纬度"
                    prop="lat"
                    :show-overflow-tooltip="true"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    label="检测时间"
                    prop="updatedat"
                    :show-overflow-tooltip="true"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    label="浓度值"
                    prop="vals"
                    :show-overflow-tooltip="true"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="超标状态"
                    prop="isExceed"
                    :show-overflow-tooltip="true"
                    width="100"
                >
                <template slot-scope="scope">
                        {{scope.row.isExceed?'是':'否'}} 
                </template>
                </el-table-column>
                <el-table-column
                    label="超标倍数"
                    prop="exceedMultiple"
                    :show-overflow-tooltip="true"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="超标率"
                    prop="exceedRate"
                    :show-overflow-tooltip="true"
                    width="100"
                >
                </el-table-column>
               <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding"
                >
                    <template >
                            <!-- <el-button
                                size="mini"
                                type="text"
                            >操作</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {getProjectPhase} from "@/api/data/proDataForup"
import {GetSamplingData} from "@/api/project/SoliPro.js"
import { GetControlStandard } from "@/api/project/SoliPro";
export default {
    name: 'proPollute',
    props: {
        formData: {}
    },
    watch:{
        formData(){
            this.getProjectPhase();
        },
        // pollute(val){
             
        // }
    },
    data() {
        return {
            //批次ID列表
            phaseList:[],
            //污染统计数据
            polluteResult:[],
            //污染物过滤条件
            pnameFilters: [],
            //选择数据
            radio1:"",
            //选择数据
            radio2:"",
            //选择数据
            radio3:"",
            //选择数据
            radio4:"",
            //选择数据
            radio5:"",
            //污染统计
            cas:[],
            chemicaltype:[],
            chemname:[],
            ctname:[],
            threshtypename:[],
            vals:[],
            //蒙版加载
            loading:false,
        };
    },
    mounted() {
    //    setTimeout(()=>{
    //        this.filterCreate()
    //    },100)
    },
    methods: {
        //获取污染物所有类型
        getAllStandard(params){
            GetControlStandard(params).then(res=>{
                let cas = [],chemicaltype=[],chemname=[],ctname=[],threshtypename= [],vals=[]
                res.result.forEach(item=>{
                    if(cas.indexOf(item.cas)==-1){
                        cas.push(item.cas)
                    }
                    if(chemicaltype.indexOf(item.chemicaltype)==-1){
                        chemicaltype.push(item.chemicaltype)
                    }
                    if(chemname.indexOf(item.chemname)==-1){
                        chemname.push(item.chemname)
                    }
                    if(ctname.indexOf(item.ctname)==-1){
                        ctname.push(item.ctname)
                    }
                    if(threshtypename.indexOf(item.threshtypename)==-1){
                        threshtypename.push(item.threshtypename)
                    }
                    if(vals.indexOf(item.vals)==-1){
                        vals.push(item.vals)
                    }
                })
                this.cas = cas
                this.chemicaltype = chemicaltype
                this.chemname = chemname
                this.ctname = ctname
                this.threshtypename = threshtypename
                this.vals = vals
                this.radio1 = ctname[0]
                this.radio2 = threshtypename[0]
                this.radio3 = cas[0]
                this.radio5 = chemname[0]
                this.GetSampling()
            })
        },
        //创建过滤条件
        filterCreate(){
            // console.log(this.pollute)
            this.pollute.chemname.forEach(
                val=>{
                    this.pnameFilters.push({"value":val,"text": val})
                 }
            )
            
        },
        //获取项目的批次
        getProjectPhase(){
            const queryId = this.formData.projectId;
            getProjectPhase(queryId).then(
                res=>{
                    debugger
                    res.data.forEach(
                        item=>{
                            item.children.forEach(
                                method =>{
                                    if(method.codeStr=="pz_drill_info"){
                                        method.children.forEach(
                                            stage=>{
                                                this.phaseList.push(stage.phase)
                                            }
                                        )
                                    }
                                }
                            )
                        }
                    )
                    this.GetSamplingData()
                }
            )
        },
        //根据批次获取污染统计
        GetSampling(){
            let params ={
                "stage_ids":this.phaseList.join(","),
                "chemname":this.radio5,
                "cas":this.radio3,
                "ctname":this.radio1,
                "threshtypename":this.radio2,
            }
            this.loading = true
            GetSamplingData(params).then(
                res=>{
                    this.polluteResult = res.result
                    this.loading = false
                }
            ) 
        },
        
        //获取污染标准
        GetSamplingData(){
            if(this.phaseList.length==0){
                return
            }
            let params ={
                        "stage_ids":this.phaseList.join(",")
                    }
            this.getAllStandard(params)
            
        },
        //过滤
        filterPname(value, row, column) {
            const property = column['property'];
            // if( value)
            // console.log(value)
            return row[property] === value;
        },
    },
};
</script>

<style lang="scss" scoped>
.updateForm{
    min-height: calc(100vh - 198px) ;
}
.radioGroup{
    margin: 10px 0px;
}
.zoneTask{
    max-height: 600px;
}
.radioItem{
    width: 150px;
}
.radioLabel{
    display: inline-block;
    width: 120px;
}
</style>